<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="utf-8" />
  <meta name="renderer" content="webkit" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title></title>
  <link href="css/daterangepicker.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="enterpriseCommon/common.css" />
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <style>
    [v-cloak] {
      display: none;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 170px;
      height: 40px;
      margin: 0 10px;
    }

    .el-input--prefix .el-input__inner {
      height: 40px;
    }

  </style>
  <script src="js/vue.js"></script>
  <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <div id="app" v-cloak>
    <header></header>
    <div class="header-space"></div>

    <section class="section381">
      <div class="content">
        <div class="title">
          <div class="name">刷新记录</div>
          <div class="filter">
            <b>使用时间</b>

            <b>使用时间</b>
            <el-date-picker v-model="start" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="最早">
            </el-date-picker>
            <span>—</span>
            <el-date-picker v-model="end" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="最晚">
            </el-date-picker>
            <input type="submit" value="搜索" class="btn" @click="getListData" />
            <input type="reset" value="清除" class="reset" @click="start = end = ''" />
          </div>
        </div>
      </div>
    </section>
    <section class="section421">
      <div class="content">
        <div class="top-operate">
          <label for="" :class="{on: isCheckAll}" class="checkbox" @click="changeCheckAllHandle">全选</label>
          <a href="javascript:void(0)" class="btn" @click="exportCheckHandle">导出</a>

          <div class="right">
            职位刷新次数：<i class="akrobat" v-html="residue_times" v-text="refreshCount"></i>
          </div>
        </div>
        <div class="table">
          <table>
            <tr>
              <th></th>
              <th>刷新职位</th>
              <th>刷新时间</th>
              <th>操作人</th>
              <th>消耗次数</th>
            </tr>
            <tr v-for="(item, index) in list" :key="index">
              <td>
                <label for="" :class="{on: checkMap[index]}" class="checkbox" @click="changeCheckHandle(index)"></label>
              </td>
              <td v-html="item.recruit.name"></td>
              <td v-html="item.updated_at"></td>
              <td>
                <img :src="item.enterprise_user.logo" alt="" class="face" />{{item.enterprise_user.name}}
              </td>
              <td v-html="item.consume_times"></td>
            </tr>
          </table>
        </div>

        <div class="g-prvNxt">
          <el-pagination background layout="prev, pager, next, sizes, jumper" :total="total" :current-page.sync="page" :page-sizes="limitList" :page-size.sync="limit" @current-change="pageChage" @size-change="limitChangeHandle">
          </el-pagination>
        </div>
      </div>
    </section>

    <footer></footer>
  </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/slide.min.js"></script>
  <script src="js/polyfill.min.js"></script>
  <script src="js/jquery.nicescroll3.7.6.min.js"></script>
  <script src="js/main.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="js/request.js"></script>
  <script src="js/getPrepareData.js"></script>
  <script src="js/jquery-ajax-blob-arraybuffer.js"></script>
  <script>
    $(function() {
      $("header").load("./enterpriseCommon/header.html");
      $("footer").load("./enterpriseCommon/footer.html");
    })

  </script>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        refreshCount: 0,
        page: 1,
        total: 0,
        limit: 10,
        start: '',
        end: '',
        residue_times: 0,
        checkMap: {},
        limitList: [10, 20, 30, 40, 50],
        list: []
      },
      computed: {
        isCheckAll: {
          get: function() {
            var checkMap = this.checkMap;
            var keys = Object.keys(checkMap)
            return keys.length && keys.every(function(key) {
              return checkMap[key];
            });
          },
          set: function(bool) {
            var checkMap = this.checkMap;
            Object.keys(checkMap).forEach(function(key) {
              checkMap[key] = bool;
            });
          }
        },
        checkCount: function() {
          var checkMap = this.checkMap;
          return Object.keys(checkMap).reduce(function(count, key) {
            if (checkMap[key]) count++;
            return count;
          }, 0);
        }
      },
      created: function() {
        this.getListData();
        this.getRefreshCount()
      },
      methods: {
        getRefreshCount: function() {
          var self = this;
          request('enterprise/refresh/times', 'GET', '', function(res) {
            self.refreshCount = res.data.refresh_times
          })
        },
        getListData: function() {
          var params = {
            start: this.start,
            end: this.end,
            page: this.page,
            num: this.limit
          };
          Object.keys(params).forEach(function(key) {
            if (params[key] === '') {
              delete params[key]
            }
          })
          request(
            "enterprise/refresh/get_refresh_record_list",
            "GET",
            params,
            successFn.bind(this),
            failFn.bind(this)
          );

          function successFn(res) {
            var data = res.data;
            var list = data.recruit;
            var checkMap = {};
            list.forEach(function(item, index) {
              item.updated_at = item.updated_at.split(" ").join("<br>");
              checkMap[index] = false;
            });
            this.list = list;
            this.checkMap = checkMap;
            this.total = data.total;
            this.residue_times = data.residue_times;
          }

          function failFn(err) {
            console.log(err);
          }
        },
        // 全选
        changeCheckAllHandle: function() {
          this.isCheckAll = !this.isCheckAll;
        },
        // 切换单项选中
        changeCheckHandle: function(index) {
          var checkMap = this.checkMap;
          checkMap[index] = !checkMap[index];
        },
        exportCheckHandle: function() {
          // var checkCount = this.checkCount;
          // var checkMap = this.checkMap;
          // console.log(checkCount);
          // this.$message('功能暂未开放')
          // if (!checkCount) return;
          // location.href = baseUrl + "enterprise/employee/refresh_record_list_export";
          var url = baseUrl + "enterprise/refresh/refresh_record_list_export";
          downloadExport(url, '刷新纪录')
        },
        limitChangeHandle: function() {
          this.page = 1;
          this.getListData();
        },
        pageChage: function(page) {
          this.getListData();
        }
      }
    });

  </script>
</body>

</html>
